<%@ page contentType="text/html;charset=utf-8"%>
<html>
<head>
    <meta charset="UTF-8">
    <title>好友</title>
      <script src="../js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">

   $(document).ready(function(){
	   $(".content").hide();
	   $(".showfcredit,.showfemail,.showdelete,.showadd,.showtel").hide();
	   var uid=$("#friends").attr("userId");
     	$.ajax({
    		type:"post",
    		url:"getFriends.action",
    		data:{userId:uid},
    		success:function(msg){
    		if(msg=="[]"){
    			$("#test").append("<divs style='position:absolute;top:120px;left:320px;'>你还没有好友，赶快去添加吧！</div>");
        	}		
    			var data;
    			var users=msg.split(", ");//获取每个user对象
    		if(users.length>1){
    			for(var i=0;i<users.length;i++){
    				data=users[i].split("_");
    				if(data[3]=="female"){
    					data[3]="<img style='width:25px;height:30px;' src='../img/girlImg.png'/>";
    				}else if(data[3]=="male"){
    					data[3]="<img style='width:25px;height:30px;'src='../img/boyImg.png'/>";
    				}
    				if(i==0){
    					data[0]=data[0].split("[")[1];
    				}else if(i==users.length-1){
    					data[8]=data[8].split("]")[0];
    				}
    				
    				$("#tab").append("<div class='div_infor'><img  src='../uImg/"+data[0]+".jpg'  class='userimg' id='"+data[0]+"'/></div>");
    				
    				$(".showinfo").append("<div class='info' id='info"+data[0]+"'><a href='#' class='close'>×</a><div id='fname'>"+data[1]+"</div><div id='fsex'>"+data[3]+"</div><div id='fcredit'><img class='fcredit' style='width:23px;height:23px;float:left;'src='../img/wangguan.png'/>："+data[8]+"</div><div id='fsig'>"+data[6]+"</div><img  src='../img/phone.png' id='ftel' class='tel' value="+data[4]+" /><img  src='../img/email.png' class='femail' value="+data[0]+" /><img class='add' id='add_"+data[0]+"' src='../img/addblack.png'/><img class='delete' id='delet_"+data[0]+"' src='../img/delete.png'/></div></div>").children().hide();

    			}
    		}else if(users.length==1){
    			data=users[0].split("_");
    			if(data[3]=="female"){
					data[3]="<img style='width:25px;height:30px;' src='../img/girlImg.png'/>";
				}else if(data[3]=="male"){
					data[3]="<img style='width:25px;height:30px;'src='../img/boyImg.png'/>";
				}
    			data[0]=data[0].split("[")[1];
    			data[8]=data[8].split("]")[0];
    			$("#tab").append("<div class='div_infor'><img  src='../uImg/"+data[0]+".jpg'  class='userimg' id='"+data[0]+"'/></div>");
    			$(".showinfo").append("<div class='info' id='info"+data[0]+"'><a href='#' class='close'>×</a><div id='fname'>"+data[1]+"</div><div id='fsex'>"+data[3]+"</div><div id='fcredit'><img  class='fcredit' style='width:23px;height:23px;float:left;'src='../img/wangguan.png'/>："+data[8]+"</div><div id='fsig'>"+data[6]+"</div><img  src='../img/phone.png' id='ftel' class='tel' value="+data[4]+" /><img  src='../img/email.png' class='femail' value="+data[0]+" /><img class='add' id='add_"+data[0]+"' src='../img/addblack.png'/><img class='delete' id='delet_"+data[0]+"' src='../img/delete.png'/></div></div>").children().hide();	
    		}
    		}	
       });
     	
     		//显示提示
	     	$(".showinfo").on("mouseover",".fcredit",function(e){
	     		$(".showfcredit").css({position:"absolute",left:e.pageX-10,top:e.pageY-30}).delay(400).show();
	     	});
     		
	     	$(".showinfo").on("mouseover",".femail",function(e){
	     		$(".showfemail").css({position:"absolute",left:e.pageX-20,top:e.pageY-30}).delay(400).show();
	     	});
	     	
	     	$(".showinfo").on("mouseover",".delete",function(e){
	     		$(".showdelete").css({position:"absolute",left:e.pageX-10,top:e.pageY-30}).delay(400).show();
	     	});
	     	
	     	$(".showinfo").on("mouseover",".add",function(e){
	     		$(".showadd").css({position:"absolute",left:e.pageX-40,top:e.pageY-30}).delay(400).show();
	     	});
	     	
	     	$(".showinfo").on("mouseover",".tel",function(e){
	     		$(".showtel").html("联系方式:"+$(this).attr("value")).css({position:"absolute",left:e.pageX-100,top:e.pageY-30}).delay(400).show();
	     	});
	     	
     		//隐藏提示
	     	$(".showinfo").on("mouseout",".fcredit",function(e){
	     		$(".showfcredit").hide();
	     	});
	     	$(".showinfo").on("mouseout",".femail",function(e){
	     		$(".showfemail").hide();
	     	});
	     	$(".showinfo").on("mouseout",".delete",function(e){
	     		$(".showdelete").hide();
	     	});
	     	$(".showinfo").on("mouseout",".add",function(e){
	     		$(".showadd").hide();
	     	});
	     	$(".showinfo").on("mouseout",".tel",function(e){
	     		$(".showtel").hide();
	     	});
	     	
     	
	     	
	     	$("#tab").on("click",".userimg",function(e) {
     		 	var id=$(this).attr("id");
     		 	var i=0;
     		 	
     		 	$(".showinfo").children(".info").hide();
     		 	$(".showinfo").children("#info"+id+"").css({position:"absolute",left:e.pageX-10,top:e.pageY-10}).fadeIn(500);
     		 	
     		 	
     		 	
     		});
     
     		$(".showinfo").on("click",".close",function(){
     			$(".showinfo").children(".info").fadeOut(500);
     			
     		});
     			
     		$(".showinfo").on("mouseover",".close",function(){
     			$(".close").addClass("hover");
 			 });
     		$(".showinfo").on("mouseout",".close",function(){
     			$(".close").removeClass("hover");
 			 });
		
     //删除
    	$(".showinfo").on("click",".delete",function(){
    		if(confirm("确定要删除该好友？")){
    			var id=$(this).attr("id").split("_")[1];
    			$("#"+id+"").parent().remove();
    			$(".showinfo").children(".info").hide();
    			$.ajax({
    				type:"post",
    				url:"deletefriend.action",
    				data:{userId:id},
    				success:function(msg){
    					alert("删除成功！");
    				}
    			});
    		}
     });
     
     //拉入黑名单
    	$(".showinfo").on("click",".add",function(){
    		if(confirm("确定要将该好友拉入黑名单？")){
			var id=$(this).attr("id").split("_")[1];
			$("#"+id+"").parent().remove();
			$(".showinfo").children(".info").hide();
			$.ajax({
				type:"post",
				url:"addBlackUser.action",
				data:{userId:id},
				success:function(msg){
					alert("已拉入黑名单！");
				}
			});
    	}
 	});
	 //发送消息
	var id2;
 	$(".showinfo").on("click",".femail",function() {
 		id2=$(this).attr("value");
 		$(".chat01_title").html("给"+id2+"发消息：");
 		$(".content").show();
 		
 	 });
	 
	 $("#send").click(function(){
		var content=$("#textarea").val();
 	 	$.ajax({
 	 		type:"post",
 	 		url:"information_sendmessage.action",
 	 		data:{id:id2,content:content},
 	 		success:function(msg){
 	 			$(".content").hide();
 	 			$(".showinfo").children(".info").hide();
 	 			alert("消息已成功发出！");
 	 		}
 	 	});
 	 	$(".chat01_content").append("<div>我:"+content+"</div>");
 	 	$("#textarea").val("");
	 });
	 $(".close_btn").click(function(){
		 $(".content").hide();
	 });
	
     		
   }); 

	
    </script>
    <style type="text/css">
    #tab{width:800px;}
    .showinfo{z-index:2000;}
    .div_infor{float:left;margin-left:20px;margin-top:20px;width:80px;height:100px;]}
    .userimg{float:left;width:80px;height:100px;color:red;}
    .nickName{float:left;width:80px;height:100px;color:red;border:1px solid red;}
    .info{float:left;background-image:url("../img/userImg2.jpg");border:1px solid red;z-index:9999;width:200px;height:300px;z-index:2000;}
    .close{font-size:30px;width:30px;height:30px;float:right;z-index:50;text-align:center;line-height:25px }
    .hover{background-color:red;cursor: hand;}
     #fname{color:red;width:85px;word-wrap:break-word;word-break:break-all;margin-left:20px;margin-top:20px;}
     #fsig{float:left;margin-top:25px;margin-left:10px;width:190px;}
     #ftel{float:left;width:25px;height:25px;margin-left:40px;margin-top:105px;}  
     #fsex{margin-left:50px;margin-top:10px;float:left;}
     #fcredit{float:left;margin-top:14px;}
     .femail{float:left;margin-top:25px;width:25px;margin-top:105px;margin-left:15px;}
     .delete{float:left;width:21px;height:21px;;margin-top:106px;margin-left:15px;}
     .add{float:left;width:21px;height:21px;;margin-top:106px;margin-left:15px;}
     body{heigth:200%;}
     a{text-decoration: none;}
     #textarea{ width: 380px; height: 70px;resize:none;}
     .chat01_title{ background: url('../img/title_bg.jpg') repeat-x 0 0; height: 28px;}
     .chat01_content { height: 120px; overflow-x: none; overflow-y: auto; resize: vertical;resize:none; }
     .content {position: fixed;z-index:999999;top:25%;left:25%;background-color:white;  border: 1px #666666 solid; border-right: 1px #bebebe solid; width: 380px; height: 280px; float: left; position: absolute;top:15%;left:20%; }
     .chat02_title { background: url('../img/chat_title_bg.jpg') repeat-x 0 0; height: 25px;}
    .chat02_bar { background: url('../img/chat_bar_bg.jpg') repeat-x 0 0; height: 35px;}
    #send{float:right;margin-right:5px;margin-top:3px;}
    .close_btn { background: url('../img/icon.png') no-repeat 0 0;position:absolute;top:13px;left:365px;display: block; width: 15px; height: 15px; }
    </style>
</head>
<body >
	<div id="test">
		<div id="friends" userId="${user.userId}"></div>
			<div id="tab">
		</div>
		<div class="showinfo">
		</div>

    <div class="content">
           <div class="chat01_title">
           </div>
            <a class="close_btn" href="#"></a>
           <div class="chat01_content">
           </div>
           <div class="chat02_title">
           </div>
           <div class="chat02_content">
               <textarea id="textarea"></textarea>
           </div>
           <div class="chat02_bar">
                   <div id="send" style="right: 5px; top: 5px;">
                       <img src="../img/send_btn.jpg">
                    </div>
           </div>
    </div>
		
	</div>
	<div class="showfcredit" style="z-index:9999">信誉度</div>
	<div class="showfemail" style="z-index:9999">发送消息</div>
	<div class="showtel" style="z-index:9999"></div>
	<div class="showdelete" style="z-index:9999">删除好友</div>
	<div class="showadd" style="z-index:9999">拉入黑名单</div>
	
</body>
</html>